<template>
  <div class="home">
    <div class="top"></div>

    <van-nav-bar title="萌宠之家" fixed />

    <!-- 轮播图 -->
    <van-swipe
      class="my-swipe"
      :autoplay="3000"
      indicator-color="white"
      :lazy-render="true"
      :show-indicators="false"
    >
      <van-swipe-item v-for="(image, index) in images" :key="index">
        <img :src="image" alt="" />
      </van-swipe-item>
    </van-swipe>

    <!-- 宫格 -->
    <div class="grid">
      <router-link to="/cat">
        <img src="../../assets/icon/icon1.png" alt="" class="img" />
        <div class="title">上门喂猫</div>
      </router-link>
      <router-link to="/dog">
        <img src="../../assets/icon/icon2.png" alt="" class="img" />
        <div class="title">上门喂狗</div>
      </router-link>
      <router-link to="/foster">
        <img src="../../assets/icon/icon3.png" alt="" class="img" />
        <div class="title">宠物寄养</div>
      </router-link>
      <router-link to="/foster">
        <img src="../../assets/icon/icon4.png" alt="" class="img" />
        <div class="title">宠物领养</div>
      </router-link>
    </div>

    <!-- 每日推荐标题 -->
    <div class="re-title">
      <span class="title">宠物日记</span>
      <router-link to="/diary">
        <div class="check-all">
          查看全部
          <img src="../../assets/icon/right-arrow.png" alt="" />
        </div>
      </router-link>
    </div>

    <!-- 日记单元 -->
    <div @click="goDetails(item.did)"  v-for="item in diary" :key="item.index">
      <diary-cell  :item="item"/>
    </div>
 
    
    <!-- 更多 -->
    <router-link to="/diary">
      <div class="bottm-text">更多宠物日记></div>
    </router-link>

    <div class="bottom"></div>

    <my-footer />
  </div>
</template>

<script>
import MyFooter from "@/components/MyFooter.vue";
import DiaryCell from "@/components/DiaryCell.vue";

export default {
  name: "home",
  components: { MyFooter,DiaryCell },
  mounted () {
    //宠物日记 http://120.79.2.254:3000/fosterID?fid=1
     this.axios.get('http://120.79.2.254:3000/diary').then(res=>{
      // console.log('日记页面',res);
          this.diary=res.data.result
          console.log('diary1eeeeee',this.diary);
    })
    //学长服务器 --后续可能要开  --暂时注释
    this.axios.post(`http://47.106.185.150/api/client/queryWalk`).then(res=>{
      console.log(res.data);
    })
  },
  methods: {
       goDetails(did) {
        this.axios.get(`http://120.79.2.254:3000/diaryID?did=${this.did}`).then(res=>{
          console.log([101,res]);
            this.$router.push(`/details?did=${did}`)
        })
      
    },
  },
  data() {
    return {
      diary: [],
      images: [
        "http://112.74.112.119/img/pet/bannner/banner1.jpg",
        "http://112.74.112.119/img/pet/bannner/banner2.jpg",
        "http://112.74.112.119/img/pet/bannner/banner3.jpg",
      ],
    };
  },
};
</script>

<style lang="scss" scoped>
.top {
  margin-top: 60px;
}

// 轮播图
.my-swipe .van-swipe-item {
  // margin-top: 3vw;
  margin-bottom: 5vw;
  width: 100vw;
  text-align: center;
  img {
    width: 90%;
    border-radius: 12px;
    box-shadow: 0px 0px 6px #ccc;
  }
}

// 宫格
.grid {
  width: 95vw;
  margin: auto;
  text-align: center;
  display: flex;
  justify-content: space-around;
  margin-bottom: 5vw;
  .img {
    width: 12vw;
    margin-bottom: 2vw;
  }
  .title {
    color: #000;
    font-size: 0.8em;
  }
}

// 每日推荐标题
.re-title {
  margin: auto;
  width: 90vw;
  height: 10vw;
  line-height: 10vw;
  display: flex;
  justify-content: space-between;
  margin-bottom: 3vw;
  .title {
    color: #000;
    font-size: 1.2em;
    font-weight: bold;
  }
  .check-all {
    color: #a7a7a7;
    font-size: 0.8em;
    img {
      width: 0.9em;
      padding-bottom: 0.2em;
    }
  }
}

// 更多
.bottm-text {
  text-align: center;
  margin-top: 5vw;
  margin-bottom: 5vw;
  color: #a7a7a7;
  font-size: 0.9em;
}
.bottom {
  height: 50px;
}
</style>